<template>
  <div class="style-selector-container">
    <div class="style-selector">
      <label for="styleSelect">选择风格</label>
      <div class="select-wrapper">
        <select id="styleSelect" v-model="selectedStyle">
          <option v-for="style in styles" :value="style.value">{{ style.label }}</option>
        </select>
        <div class="background-decorator"></div>
      </div>
      <button @click="convertImage">
        转换 <i class="fa fa-magic"></i>
      </button>
    </div>
    <div class="converted-preview">
      <div class="image-container">
        <div class="converted-image-placeholder">
        <img v-if="convertedImageUrl" :src="convertedImageUrl" alt="Converted Preview" style="max-width: 300px;">
        </div>
        <button v-if="convertedImageUrl" @click="saveConvertedImage">
          保存 <i class="fa fa-save"></i>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedStyle: '',
      styles: [
        { value: 'style1', label: '梦幻动漫' },
        { value: 'style2', label: '唯美写实' },
        { value: 'style3', label: '绯红烈焰' },
        { value: 'style4', label: '彩绘日漫' }
      ],
      convertedImageUrl: null,
    };
  },
  methods: {
    convertImage() {
      // 模拟转换图片的逻辑
      this.convertedImageUrl = 'https://ai-painting-image.vivo.com.cn/ai-painting/763783fb0b1dcb20f49e510e9c58e53f3bc51a27-0.png ';
      //这里是返回的url
    },
    saveConvertedImage() {
      // 保存图片到本地的逻辑
      const link = document.createElement('a');
      link.href = this.convertedImageUrl;
      link.download = 'converted_image.jpg';
      link.click();
    }
  }
};
</script>

<style scoped>
/* 全局设置字体为宋体，减小字体大小 */
.style-selector-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
}

.style-selector {
  display: flex;
  align-items: center;
  position: relative;
}

.style-selector label {
  margin-right: 10px;
  font-size: 15px;  /* 调整字体大小 */
}

.select-wrapper {
  position: relative;
  display: inline-block;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  border-color:#3c4040
}

.select-wrapper select {
  padding: 5px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  font-size: 14px;  /* 调整字体大小 */
}/**对应选择框里面文字 */

.background-decorator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  border-radius: 8px;
  z-index: 0;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: none;
  background-color: #81dec5;
  color: white;
  cursor: pointer;
  font-size: 14px;  /* 调整字体大小 */
  border-radius: 8px;
  margin-left: 10px;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
}

button i {
  margin-left: 5px;
}

.converted-image-placeholder {
  width: 250px; /* 与图片的最大宽度相同 */
  height: 400px; /* 与图片的最大高度相同 */
  border: 2px solid  rgb(139, 203, 200);; /* 绿色描边 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 10px; /* 与下方按钮的距离 */
}

.converted-image-placeholder img {
  width: 250px; /* 设置图片宽度为固定值 */
  height: 400px; /* 设置图片高度为固定值 */
  object-fit: cover; /* 调整图片适应方式，使其填充整个框 */
  border-radius: 8px; /* 圆角 */
}

.converted-preview {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container button {
  margin-top: 10px;
  background-color: rgb(139, 203, 200);
  border-radius: 8px;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  font-size: 14px;  /* 调整字体大小 */
}

img {
  max-width: 300px;
}
</style>



  
  
